<template>
    <div>
        <div class="reg">
          <div class="reg-header">
            <div class="button" @click="$router.go(-1)">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="reg-title">注册</div>
          </div>
          <div class="reg-form">
             <div class="form-item">
                 <span class="iconfont icon-qq"></span>
                 <input type="text" v-model="phone" placeholder="手机号码">
             </div>
             <div class="form-item">
                 <span class="iconfont icon-qq"></span>
                 <input type="text" v-model="nickname" placeholder="昵称">
             </div>
             <div class="form-item">
                 <span class="iconfont icon-qq"></span>
                 <input type="password" v-model="password" placeholder="密码">
             </div>
             <div class="form-item">
                 <span class="iconfont icon-qq"></span>
                 <input type="text" v-model="captcha" placeholder="验证码">
                 <div class="verification" @click="getVerify">
                    获取验证码
                 </div>
             </div>
             <div class="form-btn">
                 <button class="login-btn" @click="subimtReg">注册</button>
             </div>
             <div class="argreenment">
               <span>*</span>
               注册代表您同意
               <span>《用户使用协议》</span>
               及
               <span>《隐私条款》</span>
             </div>
          </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import {getCheck,getCellphone,getSent,getyanz} from '../../api/register'
export default { 
  data() {
    return {
      "captcha":"", // 验证码
      "phone" :"", // 手机号码
      "password":"", // 密码
      "nickname":"", // 昵称
    }
  },
  methods:{
    // 提交注册
    subimtReg(){
      getCheck({"phone":this.phone}).then(data=>{
        // console.log(data.hasPassword)
        if(data.hasPassword){
          Toast.fail('已被注册');
        }else{
          if(this.phone != ""){
            getyanz({'phone':this.phone,'captcha':this.captcha}).then(()=>{
              getCellphone({"phone":this.phone,"password":this.password,"captcha":this.captcha,"nickname":this.nickname}).then(data=>{
                if(data.code == 200){
                  Toast.fail('注册成功');
                  this.$router.push('/login')
                }
              })
            })
          }
        }
      })
    },
    // 获取验证码
    getVerify(){
      if(this.phone != ""){
        getSent({'phone':this.phone}).then(data=>{
          console.log(data)
        })
      }
    }
  }
}
</script>

<style lang="less">
// 注册表单
.reg-form{
  width: 80%;
  // border: 1px solid #333;
  margin: 100px auto;
  .form-item{
    position: relative;
    input{
      width: 90%;
      outline: none;
      border: none;
      background: transparent;
      border-bottom: 1px solid #ccc;
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
      padding-left: 30px;
      padding: 0px 0px 10px 30px;
    }
    span{
      position: absolute;
      top: 0px;
      left: 0px;
      font-size: 26px;
    }
    .verification{
      text-align: right;
      position: absolute;
      right: 20px;
      top: 6px;
      font-size: 18px;
      color: #FF494B;
    }
  }
  .form-btn{
    margin-top: 50px;
    .login-btn{
      width: 100%;
      padding: 10px 0px;
      border-radius: 30px;
      outline: none;
      border: none;
      background: #FF494B;
      color: #fff;
    }
  }
  .argreenment{
    margin-top: 30px;
    font-size: 12px;
    text-align: center;
    span{
      color: #FF494B;
    }
  }
}


  // 返回上一页
  .reg{
    .reg-header{
      height: 50px;
      font-size: 20px;
      .button{
        float: left;
        line-height: 50px;
        padding-left: 10px;
      }
      .reg-title{
        text-align: center;
        line-height: 50px;
        color: #FF494B;
      }
    }
  }
</style>